<template>
	<uni-card spacing="0">
		<view class="item-dom">
			<view class="flex-row flex-row-space-between">
				<text class="title">{{detailsData.eventName}}</text>
				<text class="money">{{detailsData.fee}}</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-dizhi" style="padding-right: 15rpx; color: #01c2b7;"></text>
				<text>活动地址： {{detailsData.eventPlace}}</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-shijian" style="padding-right: 15rpx; color: #01c2b7;"></text>
				<text>活动时间： {{detailsData.eventDate}}</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-qunti" style="padding-right: 15rpx; color: #01c2b7;"></text>
				<text>参与对象： {{detailsData.participants}}</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-huodongzhuti" style="padding-right: 15rpx; color: #01c2b7;"></text>
				<text>活动主题： {{detailsData.eventTopic}}</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-dianhua" style="padding-right: 15rpx;  color: #01c2b7"></text>
				<text>联系电话： {{detailsData.eventPhone}}</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-youxiang" style="padding-right: 15rpx;  color: #01c2b7"></text>
				<text>联系邮件： {{detailsData.eventEmail}}</text>
			</view>
		</view>
	</uni-card>
	
	<uni-card spacing="0">
		<view class="item-dom">
			<view class="flex-row flex-row-space-between">
				<text class="title">报名信息</text>
			</view>
			
			<view class="flex-row">
				<text class="iconfont icon-jibenxinxi1" style="padding-right: 15rpx; color: #01c2b7;"></text>
				<text>报名人：{{detailsData.name}}</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-icon1x" style="padding-right: 15rpx; color: #01c2b7;"></text>
				<text>报名方式：{{detailsData.registrationMethod}}</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-dianhua" style="padding-right: 15rpx;  color: #01c2b7"></text>
				<text>报名电话： {{detailsData.phone}}</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-youxiang" style="padding-right: 15rpx;  color: #01c2b7"></text>
				<text>报名邮箱： {{detailsData.email}}</text>
			</view>
		</view>
	</uni-card>
	
	<uni-card spacing="0">
		<view class="item-dom">
			<view class="flex-row flex-row-space-between">
				<text class="title">活动内容</text>
			</view>
			<view style="padding:  0 10px;">
				<text>{{detailsData.eventContent}}</text>
			</view>
		</view>
	</uni-card>
	<view style="padding-bottom: 10px;">
		<uni-card spacing="0">
			<view class="item-dom">
				<view class="flex-row flex-row-space-between">
					<text class="title">活动备注</text>
				</view>
				<view style="padding:  0 10px;">
					<text>{{detailsData.comment}}</text>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script lang="ts" setup>
	import { activityApplyDetail } from "@/api/activity"
	import { Activity } from "@/api/tables/Activity"
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	let detailsData = ref<Activity>({});

	onLoad((option) => {
		getDetail(option.itemID, option.eventId)
	});
	function getDetail(id,eventId) {
		activityApplyDetail({ id,eventId }).then(res => {
			if (res.code == '200') {
				detailsData.value = res.data
			}
		})
	}

</script>

<style lang="scss" scoped>
	.item-dom {
		font-size: 28rpx;
		color: #999999;
		font-family: "微软雅黑";
	
		.title {
			font-size: 30rpx;
			line-height: 2;
			color: #01c2b7;
			font-weight: 600;
		}
	
		.title1 {
			padding-top: 10px;
			font-size: 26rpx;
			line-height: 2;
			font-weight: 600;
			color: #01c2b7;
		}
	
		.money {
			text-align: right;
			width: 100px;
			font-size: 28rpx;
			color: #2b9395;
			font-weight: 600;
		}
	}
</style>